*{
	padding: 0;
	margin: 0;
}

$baseVal : 750 / 10;
@function pxToRem($px){
	@return $px / $baseVal  *  1rem;
}
.tabbar{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	display: flex;
	user-select: none;
	height: pxToRem(100);
	background-color: #fff;
	border-top: 1px solid #eee;
	&__item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex:1;
		&.on{
			.icon{
				animation: heartBeat 1s ease-in-out;
				.transition_move1{
					animation: blockMove 0.5s 0.3s forwards;
				}
				.transition_move2{
					animation: blockMove 0.5s 0.35s forwards;
				}
				.transition_move3{
					animation: blockMove 0.5s 0.4s forwards;
				}
				.path-circle{
					// forwards:动画停留在结束位置
					animation: circlePath 1s forwards;
				}
				.path-arrow{
					animation: arrowPath 1s forwards;
				}
				.min_circle01{
					animation: circleMove 1s forwards;
				}
				.min_circle02{
					animation: circleMove 1s 0.15s ease forwards;
				}
				.min_circle03{
					animation: circleMove 1s 0.3s ease forwards;
				}
				.path-mouth{
					animation: mouthPath 1s forwards;
				}
			}
			.tabbar__name{
				color:#698AFF ;
			}
		}
	}
	&__svg{
		width:pxToRem(48);
		height:pxToRem(48);
		margin: 0 auto;
		
	}
	&__name{
		padding-top:2px;
		font-size: pxToRem(20);
		text-align: center;
		color: #AFB8CC;
		transition: all .3s;
	}
	.icon{
		transform-origin: center center;
		stroke-linecap: round;
		.transition_move1{
			transform-origin:left bottom; 
			transform: translate(-48px,50px);
		}
		.transition_move2{
			transform-origin:left bottom;
			transform: translate(-48px,50px);
		}
		.transition_move3{
			transform-origin:left bottom;
			transform: translate(-48px,50px);
		}
		.path-circle{
			stroke-linecap: round;
			stroke-dasharray: 44 44;
			stroke-dashoffset: 0;
		}
		.path-arrow{
			stroke-linecap: round;
			stroke-dasharray: 39 39;
			stroke-dashoffset: 0;
		}
		.min_circle01{
			transform-origin: 13px 24px; 
		}
		.min_circle02{
			transform-origin: 25px 24px; 
		}
		.min_circle03{
			transform-origin: 37px 24px; 
		}
		.path-mouth{
			stroke-linecap: round;
			stroke-dasharray: 23 23;
			stroke-dashoffset: 0;
		}
		
	}
}
/**
 * 生成路径的关键帧动画
 * @params $keyframes 关键帧名
 * @params $dashoffset 偏移值
 * @params $startColor 路径开始颜色
 * @params $endColor 路径结束的颜色
 */
@mixin pathAmimate($keyframes,$dashoffset,$startColor:#AFB8CC,$endColor:#ffffff) {
	@keyframes #{$keyframes}{
		0%{
			stroke-dashoffset: 0;
			stroke:$startColor;
		}
		50%{stroke-dashoffset: $dashoffset;stroke:$startColor;}
		50.1%{stroke-dashoffset: -1 * $dashoffset;stroke:$endColor;}
		70%{stroke-dashoffset: -1 * $dashoffset;stroke:$endColor;}
		100%{
			stroke-dashoffset: 0;
			stroke:$endColor;
		}
	}
}
// 路径动画
@include pathAmimate('circlePath',44);
@include pathAmimate('arrowPath',39);
@include pathAmimate('mouthPath',23);
@keyframes blockMove{
	0%{}
	100%{
		transform: translate(0px,0px);
	}
}

@keyframes circleMove{
	0%{transform: scale(1);fill:"#B1BACD"}
	50%{transform: scale(0);fill:"#B1BACD"}
	50.1%{transform: scale(1);fill:"#B1BACD"}
	70%{transform: scale(1) translateY(10px);fill:#fff;}
	80%{transform: scale(1) translateY(0px);fill:#fff;}
	85%{transform: scale(1) translateY(-2px);fill:#fff;}
	100%{
		transform: scale(1) translateY(0px);fill:#fff;
	}
}
// @keyframes circlePath1{
// 	0%{
// 		stroke-dashoffset: 0;
// 	}
// 	50%{stroke-dashoffset: 44;stroke:#AFB8CC;}
// 	50.1%{stroke-dashoffset: -44;stroke:white;}
// 	70%{stroke-dashoffset: -44;stroke:white;}
// 	100%{
// 		stroke-dashoffset: 0;stroke:white;
		
// 	}
// }
// @keyframes arrowPath{
// 	0%{
// 		stroke-dashoffset: 0;
// 	}
// 	50%{stroke-dashoffset: 39;stroke:#AFB8CC;}
// 	50.1%{stroke-dashoffset: -39;stroke:white;}
// 	70%{stroke-dashoffset: -39;stroke:white;}
// 	100%{
// 		stroke-dashoffset: 0;stroke:white;
		
// 	}
// }

// 心跳动画
@keyframes heartBeat {
	0% {
		transform: scale(1);
	}
	14% {
	  transform: scale(0.8);
	}
	28% {
		transform: scale(1);
	}
	42% {
		transform: scale(0.9);
	}
	90% {
	transform: scale(1);
	}
}